<template>
    <transition name="slide-left">
        <div class="h-full bg-primary">
            <div class="col b r-3x bg-white-only p-l-md register p-b">
                <div class="padder-lg">
                    <el-form :model="userInfo" :rules="registerRules" ref="registerForm">
                        <h1 class="text-primary text-center">指管装注册</h1>
                        <div class="p-t-sm hbox">
                            <div class="col">
                                <el-form-item prop="MOBILE">
                                    <el-input v-model="userInfo.MOBILE" name="MOBILE" ref="MOBILE" placeholder="请输入手机号" :suffix-icon="MobileIcon">
                                        <template slot="prepend"><div class="w-xxs text-center">手机号</div></template>
                                    </el-input>
                                </el-form-item>
                            </div>
                            <div class="col w-xxxs text-center text-danger">*</div>
                        </div>
                        <div class="p-t-sm hbox">
                            <div class="col">
                                <el-input type="password" v-model="userInfo.USER_PASSWORD" placeholder="请输入密码">
                                    <template slot="prepend"><div class="w-xxs text-center">密码</div></template>
                                </el-input>
                            </div>
                            <div class="col w-xxxs text-center text-danger">*</div>
                        </div>
                        <div class="p-t-sm hbox">
                            <div class="col">
                                <el-input type="password" v-model="userInfo.REWRITER_PASSWORD" placeholder="请输入密码">
                                    <template slot="prepend"><div class="w-xxs text-center">重复密码</div></template>
                                </el-input>
                            </div>
                            <div class="col w-xxxs text-center text-danger">*</div>
                        </div>
                        <div class="p-t-sm hbox">
                            <div class="col">
                                <el-input v-model="userInfo.NAME" placeholder="请输入姓名">
                                    <template slot="prepend"><div class="w-xxs text-center">姓名</div></template>
                                </el-input>
                            </div>
                            <div class="col w-xxxs text-center text-danger">*</div>
                        </div>
                        <div class="p-t-sm hbox">
                            <div class="col">
                                <el-input v-model="userInfo.MAIL" placeholder="请输入邮箱">
                                    <template slot="prepend"><div class="w-xxs text-center">邮箱</div></template>
                                </el-input>
                            </div>
                            <div class="col w-xxxs text-center text-danger">*</div>
                        </div>
                        <div class="p-t-sm pull-right m-r-sm">
                            <router-link to='/login'>
                                <el-button type="info">退回</el-button>
                            </router-link>
                            <el-button type="primary" v-on:click="register()">注册</el-button>
                        </div>
                    </el-form>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
    name: 'register',
    data(){
        const validatePass = (rule, value, callback) => {
            if (value.length < 5) {
                this.validateMobile="el-icon-warning";
                callback(new Error('密码不能小于5位'));
            } else {
                callback();
            }
        };
        return {
            userInfo: {
                MOBILE: '',
                USER_PASSWORD: '',
                REWRITER_PASSWORD: '',
                NAME: '',
                MAIL: ''
            },
            registerRules:{
                MOBILE: [{
                    required: true,
                    message: ' ',
                    trigger: 'blur',
                    validator: validatePass
                }]
            },
            validateMobile: ''
        }
    },
    methods: {
        register() {
            this.$refs.registerForm.validate(valid => {
                if (valid) {
                    var obj = {
                        dispatchName: 'register',
                        data: this.userInfo
                    }
                    this.submitDispatch(obj, (resultData)=>{
                        if(resultData.success){
                            this.alertTip({
                                type: 'success',
                                message: '注册成功!',
                                successFn: ()=>{
                                    this.$router.push({
                                        path: '/login'
                                    });
                                }
                            });
                        }
                    });
                }
            });

            
        }
    },
    computed:{
        MobileIcon() {
            return this.validateMobile;
        }
    }
}
</script>

<style lang="scss" scoped>
.register{
    position: absolute;
    top: 25%;
    left: 50%;
    width: 700px;
    margin-left: -350px;
    @media (max-width: 768px) {
        width: 90%;
        left: 0px;
        margin: 0 5% 0px 5%;
    }
}
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
}
.slide-left-enter {
  opacity: 0;
  -webkit-transform: translate(100%, 0);
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  -webkit-transform: translate(-100%, 0);
  transform: translate3d(-100%, 0, 0);
}

.el-input__suffix{
    color: red;
}
</style>
